<template>
    <div class="address-edit page">
        <formHeader :title="'地址编辑'" backUrl="/address" :ways="'1'"></formHeader>
        <div class="con">

          <div class="text">
            <textarea cols="3" v-model="area"  class="area" placeholder="粘贴地址到这里,如湖南省长沙市望城区光明小区,张三,16283918937" />
            <div class="btns">
              <div class="btn1 btn">
                <span class="del" @click="area=null">清除</span>
              </div>
              <div class="btn2" @click="aiAddress">
                <img src="./se.png" class="icon" alt="">
                <span class="txt">智能解析</span>
              </div>
            </div>
          </div>

            <div class="form">

                <txt-input v-model="address.name" type="text" label="联系人" place-holder="收货人姓名"></txt-input>
                <txt-input v-model="address.mobile" type="number" label="手机号码" place-holder="手机号码"></txt-input>
                <txt-input @click.native="selectAddress" disabled="disabled" v-model="detail" label="地址"
                           place-holder="选择地址"></txt-input>
                <txt-input v-model="address.detail" label="详细地址" place-holder="详细地址"></txt-input>
                <txt-input type="switch" v-model="address.def" style="margin-top: 0.133rem" label="设为默认"></txt-input>
            </div>

          <radius-btn @click.native="confirm" txt="完成" style="margin-top: 0.4rem;background-color:#00D6C0;"></radius-btn>




        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import txtInput from "@/components/base/txt-input"
    import radiusBtn from "@/components/base/radius-btn"
    import {getAddress} from "@/api/order";
    import {mergeAddress} from "@/api/order";
    import {addressData} from '@/common/js/area.js'
    import {isPhone} from "@/common/js/num";
    import * as  Toast from '@/toast'
    import { showAlert } from '@/dialog'
    import {showError} from "../../toast";
    import  parseArea from "@/common/js/address-parse";

    export default {
        created() {
            this.addressPicker = this.$createCascadePicker({
                title: '选择地址',
                data: addressData,
                onSelect: this.selectHandle,
                onCancel: this.cancelHandle
            })
        },
        activated() {
          this.area = null
            if (this.$route.query.id) {
                getAddress(this.$route.query.id).then(res => {
                    this.address = res.data
                })
            }else {//清空数据
                this.address = {}
            }
        },
        data() {
            return {
              area: null,
                address: {
                    name:null,
                    mobile:null,
                    detail:null,
                    province:null,
                    city:null,
                    county:null,
                },
                def: false
            }
        },
        computed: {
            detail() {
                if (!this.address.province) return ''

                return this.address.province + ' ' + this.address.city + ' ' + this.address.county
            }
        },
        methods: {
          aiAddress(){
            showAlert('解析成功',null,'请核对是否正确,必要进行修改')
            if(this.area){
             const area =  parseArea(this.area)
              this.$set(this.address,'name',area.name)
              // this.address.name = area.name
              // this.address.province= area.province
              this.$set(this.address,'province',area.province)
              // this.address.city = area.city?area.city:''
              this.$set(this.address,'city',area.city)
              // this.address.county= area.area?area.area:''
              this.$set(this.address,'county',area.area)
              // this.address.detail = area.addr
              // console.log(this.address.detail)
              this.$set(this.address,'detail',area.addr)
              // this.address.mobile = area.mobile
              this.$set(this.address,'mobile',area.mobile)
            }
          },
            turn(path) {
                this.$router.push(path)
            },
            confirm() {
                if (!this.address.name) {
                    Toast.showInfo("联系人不能为空")
                    return
                }
                if (!this.address.mobile) {
                    Toast.showInfo("手机号码不能为空!")
                    return
                }
                if (!(/^1[3456789]\d{9}$/.test(this.address.mobile))){
                    showError('请输入正确手机号')
                    return;
                }
                if (!this.detail) {
                    Toast.showInfo("地址不能为空!")
                    return;
                }
                if (!this.address.detail) {
                    Toast.showInfo("详细地址不能为空!")
                    return;
                }
                if (this.address.mobile) {
                    if (!isPhone(this.address.mobile)) {
                        Toast.showInfo("手机号码格式不正确!")
                    }
                }
                mergeAddress(this.address).then(res=>{
                    this.$router.replace("/address")
                })
            },
            selectAddress() {
                this.addressPicker.show()
            },
            selectHandle(selectedVal, selectedIndex, selectedText) {
                if (selectedText) {
                    this.$set(this.address, 'province', selectedText[0])
                    this.address.province = selectedText[0]
                    this.address.city = selectedText[1]

                    this.address.county = selectedText[2]?selectedText[2]:''

                }
            },
            cancelHandle() {

            }
        },
        components: {
            txtInput, radiusBtn,formHeader
        }
    }
</script>

<style scoped lang="stylus">
  ::-webkit-input-placeholder { /* WebKit browsers */
    color: #C8C8C8;
    font-size: 14px;
  }
    .address-edit
        z-index 2
        background url("~@/assets/helfcirindex.png") no-repeat $page-bg
        background-size 100% auto
        height 100%
        margin-top 46px
        .con
            padding 10px 10px 0px 10px
            .text
              margin-bottom 10px
              display flex
              flex-direction column
              padding 10px 10px 0 10px
              background-color white
              .area
                resize none
                border-radius 5px
                height 100px
                outline none
                border none
                padding-left 10px
                padding-top 10px
                border-bottom 1Px solid #F4F3F3
              .btns
                height 42px
                background-color white
                display flex
                align-items center
                justify-content flex-end
                .btn1
                  width 55px
                  height 24px
                  border-radius 12px
                  background-color #F4F3F3
                  display flex
                  align-items center
                  justify-content center
                  color #333333
                  font-size 11px
                  margin-right 9px
                .btn2
                  width 75px
                  height 24px
                  border-radius 12px
                  background-color #00D6C0
                  display flex
                  align-items center
                  justify-content center
                  .icon
                    width 11px
                    height 13px
                    margin-right 5px
                  .txt
                    font-size 11px
                    color white



</style>
